﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>AngularJS 表单</title>
    <script type="text/javascript" src="Scripts/angular.js"></script>
</head>
<body ng-app="">

    <form>
        选择一个选项:
        <input type="radio" ng-model="myVar" value="dogs">Dogs
        <input type="radio" ng-model="myVar" value="tuts">Tutorials
        <input type="radio" ng-model="myVar" value="cars">Cars
        选择一个选项:
        <select ng-model="myVar">
            <option value="">
            <option value="dogs">Dogs
            <option value="tuts">Tutorials
            <option value="cars">Cars
        </select>
    </form>

    <div ng-switch="myVar">
        <div ng-switch-when="dogs">
            <h1>Dogs</h1>
            <p>Welcome to a world of dogs.</p>
        </div>
        <div ng-switch-when="tuts">
            <h1>Tutorials</h1>
            <p>Learn from examples.</p>
        </div>
        <div ng-switch-when="cars">
            <h1>Cars</h1>
            <p>Read about cars.</p>
        </div>
    </div>

    <p>ng-switch 指令根据单选按钮的选择结果显示或隐藏 HTML 区域。</p>

</body>
</html>